<template>
	<div class="zco-im-widget-message-editer">
		<Editor
			id="zco-im-widget-message-editer"
			v-model="html"
			:defaultConfig="editorConfig"
			:mode="mode"
			@onCreated="onCreated"
			@onChange="onChange"
			@onDestroyed="onDestroyed"
			@onMaxLength="onMaxLength"
			@onFocus="onFocus"
			@onBlur="onBlur"
			@customAlert="customAlert"
			@customPaste="customPaste"
		/>
	</div>
</template>

<script>
import { Editor } from '@wangeditor/editor-for-vue';

export default {
	components: { Editor },
	props: {
		text: {
			type: String,
			default: () => '',
			required: true
		},
		mode: {
			type: String,
			default: () => 'simple',
			required: false
		},
		editorConfig: {
			type: Object,
			default: () => {
				'请输入内容...';
			}
		},
		editor: {
			type: Object,
			default: () => null
		},
		onCreated: {
			type: Function
		},
		onChange: {
			type: Function
		},
		onDestroyed: {
			type: Function
		},
		onMaxLength: {
			type: Function
		},
		onFocus: {
			type: Function
		},
		onBlur: {
			type: Function
		},
		customAlert: {
			type: Function
		},
		customPaste: {
			type: Function
		}
	},
	data() {
		return {
			html: '',
			toolbarConfig: {}
		};
	},
	methods: {},
	mounted() {
		this.html = this.text;
	}
};
</script>

<style scoped>
.zco-im-widget-message-editer {
	width: calc(100vw - 190px);
	min-height: 20px;
	line-height: 20px;
	margin-left: 40px;
	padding: 8px 10px;
	border: 1px solid #eee;
	background: #f2f2f2;
	max-height: 170px;
	border-radius: 6px;
	outline: none;
	overflow: auto;
}
</style>

<style>
#zco-im-widget-message-editer #w-e-textarea-1 {
	border: 0;
	outline: 0;
}
#zco-im-widget-message-editer .w-e-text-placeholder {
	position: absolute;
	top: 0;
	color: rgba(0, 0, 0, 0.6);
}
#zco-im-widget-message-editer {
	position: relative;
}
</style>
